<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2022奥运会满意度调查-冰墩墩心情刻度尺</title> 
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<link rel="stylesheet" href="css/dundunChange.css">
	</head>
	<body>
		<div id="app">
			<div class="BingDunDun" id="jumpStyle">
				<div class="body"></div>
				<div class="ear1"></div>
				<div class="ear2"></div>
				<div class="eye1"></div>
				<div class="eye2"></div>
				<div class="face c_blue"></div>
				<div class="face c_red"></div>
				<div class="face c_purple"></div>
				<div class="face c_yellow"></div>
				<div class="face c_green"></div>
				<div class="nose"></div>
				<div class="mouse" id="mouseStyle"></div>
				<div class="leg1"></div>
				<div class="leg2"></div>
				<div class="arm1"></div>
				<div class="arm2" id="armStyle"></div>
				<div class="logo"></div>
			</div> 
			<div class="box">
				<h1>2022奥运会满意度调查</h1>
				<div class="diyRange">
					<input type="range" max="100" min="0" step="25" value="75" id="range" class="range">
				</div> 
				<div class="ditText">
					<span>不满意</span>
					<span>有点不满意</span>
					<span>普通</span>
					<span>满意</span>
					<span>棒</span>
				</div>
			</div> 
		</div> 
	</body>
	<script> 
		const range = document.getElementById("range")
		const jumpStyle = document.getElementById("jumpStyle")
		const mouseStyle = document.getElementById("mouseStyle")
		const armStyle = document.getElementById("armStyle")
		
		range.onchange = (e) => { 
			
			// TODO 逻辑代码 
			
			// 进度条的值
			let value = Number(e.target.value)
			
			armStyle.classList.remove('armStyle100')
			jumpStyle.classList.remove('jump')
			mouseStyle.classList.add('mouseStyleInit') 
			mouseStyle.classList.remove('mouseStyle0') 
			mouseStyle.classList.remove('mouseStyle25') 
			mouseStyle.classList.remove('mouseStyle50') 
			mouseStyle.classList.remove('mouseStyle100')  
			
			switch (value){
				case 0: 
				armStyle.classList.add('armStyleInit')
				mouseStyle.classList.add('mouseStyle0')    
					break;
				case 25:
				armStyle.classList.add('armStyleInit') 
				mouseStyle.classList.add('mouseStyle25')  
					break;
				case 50:
				armStyle.classList.add('armStyleInit')
				mouseStyle.classList.add('mouseStyle50')  
					break;
				case 75: 
				armStyle.classList.add('armStyleInit') 
				mouseStyle.classList.remove('mouseStyle100')  
					break;
				case 100:   
				armStyle.classList.add('armStyle100') 
				mouseStyle.classList.add('mouseStyle100')  
				jumpStyle.classList.add('jump')
					break; 
				default:
					break;
			}
		}
	</script>
</html>
